<template>
    <div class="box">
        <ul>
            <li @click="beforeCreate" v-for="item,index in $store.state.list" :key="item">
                <router-link to="/rx"><a href="index"></a>{{item.name}}</router-link>  
                <!-- {{item.name}} -->
            </li>
            <!-- <li>
                <router-link to="/drtstc">单人特色套餐</router-link>
            </li>
            <li>
                <router-link to="/ts">特色粥品</router-link>
            </li>
            <li>
                <router-link to="/jx">精选热菜</router-link>
            </li>
            <li>
                <router-link to="/sk">爽口凉菜</router-link>
            </li>
            <li>
                <router-link to="/bcp">半成品</router-link>
            </li>
            <li>
                <router-link to="/ml">面类</router-link>
            </li>
            <li>
                <router-link to="/fl">饭类</router-link>
            </li>
             <li>
                <router-link to="/">热销榜</router-link>
            </li>
            <li>
                <router-link to="/drtstc">单人特色套餐</router-link>
            </li>
            <li>
                <router-link to="/ts">特色粥品</router-link>
            </li>
            <li>
                <router-link to="/jx">精选热菜</router-link>
            </li>
            <li>
                <router-link to="/sk">爽口凉菜</router-link>
            </li>
            <li>
                <router-link to="/bcp">半成品</router-link>
            </li>
            <li>
                <router-link to="/ml">面类</router-link>
            </li>
            <li>
                <router-link to="/fl">饭类</router-link>
            </li>
            <li>
                <router-link to="/ts">特色粥品</router-link>
            </li>
            <li>
                <router-link to="/jx">精选热菜</router-link>
            </li>
            <li>
                <router-link to="/sk">爽口凉菜</router-link>
            </li>
            <li>
                <router-link to="/bcp">半成品</router-link>
            </li>
            <li>
                <router-link to="/ml">面类</router-link>
            </li>
            <li>
                <router-link to="/fl">饭类</router-link>
            </li> -->
        </ul>
        <!-- <div class="right">2</div> -->
        <div class="content">
            <router-view>
                
            </router-view> 
        </div>
    </div>
   
</template>   

<script>
import { mapState } from 'vuex';

export default {
    computed:{
        ...mapState(["data"]), 
    },
    mounted(){
        this.$store.dispatch("getData");
    },
    methods:{
      beforeCreate(){
                // console.log(this.data)
            },
    }
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0; 
}
/* html,
body {
    height: 100%;
} */
a {
    text-decoration: none;
}
ul,
li,
ol {
    list-style: none; 
}
.box {
    height: 27.27rem;
    display: flex; 
    
} 
ul::-webkit-scrollbar{
    display: none;
} 
ul {
    overflow: scroll;
    width: 20%;
    font-size: 1.125rem;
    color: black;
    background-color: aquamarine;
} 
 ul li a{
    height: 3.75rem;
    border-bottom: .0625rem solid gray;
    display: flex;
    flex-direction: row;
    align-items: center;  
}
.content::-webkit-scrollbar{
    display: none;
}
.content {
    background-color: fuchsia;
    flex: 1;
    overflow: scroll;
}
ul>li:hover a{
  color: red;
  /* border-bottom: 2px solid red; */
}

</style>
